<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考拉海购-移动端</title>
    <link rel="shortcut icon" href="./favo.ico" type="image/x-icon">
    <link rel="stylesheet/less" href="./css/reset.less">
    <link rel="stylesheet/less" href="./css/tabbar.less">
    <link rel="stylesheet/less" href="./css/home.less">
    <link rel="stylesheet/less" href="./css/search.less">
    <link rel="stylesheet/less" href="./css/helandou.less">
    <link rel="stylesheet/less" href="./css/banner.less">
    <link rel="stylesheet/less" href="./css/category.less">
    <link rel="stylesheet/less" href="./css/shop-list.less">
    <script src="./js/less@4.js"></script>
</head>
<body>
    <div class="tabbar">
        <a href="">
            <img src="./img/首页-active.png" alt="">
        </a>
        <a href="">
            <img src="./img/分类.png" alt="">
        </a>
        <a href="">
            <img src="./img/分类.png" alt="">
        </a>
        <a href="">
            <img src="./img/分类.png" alt="">
        </a>
    </div>
    <div class="home">
        <div class="top">
            <div class="top-left">
                <img src="./img/考拉.png" alt="">
                <div class="content">
                    <span>【考拉海购】官方自营 正品保障</span>
                    <span>下载APP可享新人专享价</span>
                </div>
            </div>
            <div class="top-right">
                打开APP
            </div>
        </div>
    </div>
    <div class="search">
        <div class="search-main">
            <div class="search-red"></div>
            <div class="search-content">
                在千万商品中搜索
            </div>   
        </div>
        <div class="login-btn">登录/注册</div>
    </div>
    <div class="banner-img">
        <ul>
            <li data-index="0"><img src="./img/banner-1.jpg" alt=""></li>
            <li data-index="1"><img src="./img/banner-1.jpg" alt=""></li>
            <li data-index="2"><img src="./img/banner-1.jpg" alt=""></li>
        </ul>
    </div>
    <div class="helan-dou">
        <div>
            <img src="./img/美妆.png" alt="" srcset="">
        </div>
        <div>
            <img src="./img/美妆.png" alt="" srcset="">
        </div>
        <div>
            <img src="./img/美妆.png" alt="" srcset="">
        </div>
        <div>
            <img src="./img/美妆.png" alt="" srcset="">
        </div>
        <div>
            <img src="./img/美妆.png" alt="" srcset="">
        </div>
    </div>
    <div class="rax-view">
        <div class="rax-header">
            <div class="left">
                <img src="./img/硬核补贴.png" alt="">
                <div class="timer">
                    <span class="shi">11</span>
                    <span>:</span>
                    <span class="fen">11</span>
                    <span>:</span>
                    <span class="miao">11</span>
                </div>
            </div>
            <div class="right">大牌底价补贴></div>
        </div>
        <div class="rax-body">
            <ul>
                <li>
                    <img src="./img/shop.jpg" alt="">
                    <div class="price">
                        <span>硬核价￥</span>
                        <span>389</span>
                    </div>
                    <div class="before-price">
                        ￥800
                    </div>
                </li>
                <li>
                    <img src="./img/shop.jpg" alt="">
                    <div class="price">
                        <span>硬核价￥</span>
                        <span>389</span>
                    </div>
                    <div class="before-price">
                        ￥800
                    </div>
                </li>
                <li>
                    <img src="./img/shop.jpg" alt="">
                    <div class="price">
                        <span>硬核价￥</span>
                        <span>389</span>
                    </div>
                    <div class="before-price">
                        ￥800
                    </div>
                </li>
                <li>
                    <img src="./img/shop.jpg" alt="">
                    <div class="price">
                        <span>硬核价￥</span>
                        <span>389</span>
                    </div>
                    <div class="before-price">
                        ￥800
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="category">
        <div class="item active">
            <div class="item-top">
                特惠
            </div>
            <div class="bottom">
                猜你喜欢
            </div>
        </div>
        <div class="item">
            <div class="item-top">
                特惠
            </div>
            <div class="bottom">
                猜你喜欢
            </div>
        </div>
        <div class="item">
            <div class="item-top">
                特惠
            </div>
            <div class="bottom">
                猜你喜欢
            </div>
        </div>
        <div class="item">
            <div class="item-top">
                特惠
            </div>
            <div class="bottom">
                猜你喜欢
            </div>
        </div>
        <div class="item">
            <div class="item-top">
                特惠
            </div>
            <div class="bottom">
                猜你喜欢
            </div>
        </div>
    </div>
    <div class="shop-list">
        <div class="shop-item">
            <img src="./img/shop-1.jpg" alt="">
            <div class="text">
                <div class="shop-name">
                    <img src="./img/shop-name.png" alt="">
                    <span>兰蔻</span>
                </div>
                <div class="text-detail">
                    <img src="./img/自营.png" alt="">
                    【阚清子同款】Kiehl's 科颜氏 亚马逊白泥面膜125毫升 专柜当家明星
                </div>
                <div class="text-label">
                    <span>特惠</span>
                    <span>今日秒杀</span>
                </div>
                <div class="text-price">
                    <span>优惠价￥</span>
                    <span>596</span>
                </div>
            </div>
        </div>
        <div class="shop-item">
            <img src="./img/shop-1.jpg" alt="">
            <div class="text">
                <div class="shop-name">
                    <img src="./img/shop-name.png" alt="">
                    <span>兰蔻</span>
                </div>
                <div class="text-detail">
                    <img src="./img/自营.png" alt="">
                    【阚清子同款】Kiehl's 科颜氏 亚马逊白泥面膜125毫升 专柜当家明星
                </div>
                <div class="text-label">
                    <span>特惠</span>
                    <span>今日秒杀</span>
                </div>
                <div class="text-price">
                    <span>优惠价￥</span>
                    <span>596</span>
                </div>
            </div>
        </div>
        <div class="shop-item">
            <img src="./img/shop-1.jpg" alt="">
            <div class="text">
                <div class="shop-name">
                    <img src="./img/shop-name.png" alt="">
                    <span>兰蔻</span>
                </div>
                <div class="text-detail">
                    <img src="./img/自营.png" alt="">
                    【阚清子同款】Kiehl's 科颜氏 亚马逊白泥面膜125毫升 专柜当家明星
                </div>
                <div class="text-label">
                    <span>特惠</span>
                    <span>今日秒杀</span>
                </div>
                <div class="text-price">
                    <span>优惠价￥</span>
                    <span>596</span>
                </div>
            </div>
        </div>
        <div class="shop-item">
            <img src="./img/shop-1.jpg" alt="">
            <div class="text">
                <div class="shop-name">
                    <img src="./img/shop-name.png" alt="">
                    <span>兰蔻</span>
                </div>
                <div class="text-detail">
                    <img src="./img/自营.png" alt="">
                    【阚清子同款】Kiehl's 科颜氏 亚马逊白泥面膜125毫升 专柜当家明星
                </div>
                <div class="text-label">
                    <span>特惠</span>
                    <span>今日秒杀</span>
                </div>
                <div class="text-price">
                    <span>优惠价￥</span>
                    <span>596</span>
                </div>
            </div>
        </div>
        <div class="shop-item">
            <img src="./img/shop-1.jpg" alt="">
            <div class="text">
                <div class="shop-name">
                    <img src="./img/shop-name.png" alt="">
                    <span>兰蔻</span>
                </div>
                <div class="text-detail">
                    <img src="./img/自营.png" alt="">
                    【阚清子同款】Kiehl's 科颜氏 亚马逊白泥面膜125毫升 专柜当家明星
                </div>
                <div class="text-label">
                    <span>特惠</span>
                    <span>今日秒杀</span>
                </div>
                <div class="text-price">
                    <span>优惠价￥</span>
                    <span>596</span>
                </div>
            </div>
        </div>
        <div class="shop-item">
            <img src="./img/shop-1.jpg" alt="">
            <div class="text">
                <div class="shop-name">
                    <img src="./img/shop-name.png" alt="">
                    <span>兰蔻</span>
                </div>
                <div class="text-detail">
                    <img src="./img/自营.png" alt="">
                    【阚清子同款】Kiehl's 科颜氏 亚马逊白泥面膜125毫升 专柜当家明星
                </div>
                <div class="text-label">
                    <span>特惠</span>
                    <span>今日秒杀</span>
                </div>
                <div class="text-price">
                    <span>优惠价￥</span>
                    <span>596</span>
                </div>
            </div>
        </div>
        <div class="shop-item">
            <img src="./img/shop-1.jpg" alt="">
            <div class="text">
                <div class="shop-name">
                    <img src="./img/shop-name.png" alt="">
                    <span>兰蔻</span>
                </div>
                <div class="text-detail">
                    <img src="./img/自营.png" alt="">
                    【阚清子同款】Kiehl's 科颜氏 亚马逊白泥面膜125毫升 专柜当家明星
                </div>
                <div class="text-label">
                    <span>特惠</span>
                    <span>今日秒杀</span>
                </div>
                <div class="text-price">
                    <span>优惠价￥</span>
                    <span>596</span>
                </div>
            </div>
        </div>
        <span class="fack-shop-item"></span>
    </div>

    <!-- 侧边固定导航 -->
    <div class="change-log">
        <img src="./img/考拉top.webp" alt="">
        <span>打开考拉</span>
    </div>
    <script src="./js/banner.js"></script>
    <script src="./js/Fixed-navigation.js"></script>
    <script>
        //获取元素
        var hour = document.querySelector(".shi");
        var minute = document.querySelector(".fen");
        var second = document.querySelector(".miao");
        //获取截止时间的时间戳（单位毫秒）
        var inputTime = Date.parse(new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1))
        ;
        
        //我们先调用countDown函数，可以避免在打开界面后停一秒后才开始倒计时
        countDown();
        //定时器 每隔一秒变化一次
        setInterval(countDown, 1000);
        function countDown() {
            //获取当前时间的时间戳（单位毫秒）
            var nowTime = +new Date();
            //把剩余时间毫秒数转化为秒
            var times = (inputTime - nowTime) / 1000;
            //计算小时数 转化为整数
            var h = parseInt(times / 60 / 60 % 24);
            //如果小时数小于 10，要变成 0 + 数字的形式 赋值给盒子
            hour.innerHTML = h < 10 ? "0" + h : h;
            //计算分钟数 转化为整数
            var m = parseInt(times / 60 % 60);
            //如果分钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
            minute.innerHTML = m < 10 ? "0" + m : m;
            //计算描述 转化为整数
            var s = parseInt(times % 60);
            //如果秒钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
            second.innerHTML = s < 10 ? "0" + s : s;
        }
    </script>
</body>
</html>